<script setup lang="ts">
import { ref, computed } from 'vue'
import type { Ref, ComputedRef } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'

const router = useRouter()

const tel: Ref<string> = ref('')
const telcode: Ref<string> = ref('')
const password: Ref<string> = ref('')
const newpsw: Ref<string> = ref('')

let flag: ComputedRef<boolean> = computed(() => {
  if (/^(?:(?:\+|00)86)?1\d{10}$/.test(tel.value) && password.value.length != 0 && newpsw.value == password.value && telcode.value.length >= 6) {
    return false
  } else {
    return true
  }
})
// 提交按钮的点击事件
function passwordClick() {
  showToast('修改密码成功！')
  router.push('/login')
}

// 点击发送验证码
let time: Ref<number> = ref(10)
let timer: Ref<any> = ref(null)
let text: Ref<string> = ref('发送验证码')
function sendCode() {
  timer.value = setInterval(() => {
    text.value = '重新获取(' + time.value + 's)'
    time.value--
    if (time.value == -1) {
      // 关闭定时器
      clearInterval(timer.value)
      // 将按钮设置为发送验证码
      time.value = 10
      text.value = '发送验证码'
    }
  }, 1000)
}


</script>

<template>
  <div class="password">
    <van-nav-bar style="background-color: rgba(0, 0, 0, 0);" title="忘记密码">
      <template #left>
        <p @click="$router.back()"><van-icon color="gray" name="arrow-left" /></p>
      </template>
    </van-nav-bar>

    <div class="vanCellGroup">
      <van-cell-group inset>
        <van-field v-model="tel" placeholder="手机号码" type="tel" left-icon="user-circle-o" />
      </van-cell-group>
      <van-cell-group inset>
        <van-field v-model="telcode" left-icon="more-o" center clearable placeholder="请输入验证码">
          <template #button>
            <van-button size="mini" :disabled="time < 10" @click="sendCode" style="color: blue;width: 70px;">{{ text
            }}</van-button>
          </template>
        </van-field>
      </van-cell-group>

      <van-cell-group inset>
        <van-field v-model="password" placeholder="请输入新密码" type="password" left-icon="goods-collect-o" />
      </van-cell-group>
      <van-cell-group inset>
        <van-field v-model="newpsw" placeholder="请输入确认密码" type="password" left-icon="goods-collect-o" />
      </van-cell-group>

      <van-button type="primary" :disabled="flag" size="normal" @click=passwordClick>确认</van-button>
    </div>


  </div>
</template>
<style lang="scss" scoped>
.van-nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.password {
  height: 100%;
  background-image: url(../../assets/login.jpg);
}

.vanCellGroup {
  padding-top: 100px;
}

.van-cell-group {
  margin-top: 20px;
}

.van-button {
  width: 90%;
  margin-left: 5%;
  margin-top: 30px;
}
</style>